<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 18:49:42
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-19 19:39:54
 * @FilePath: \郭招娣\app\src\views\Comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-card class="title-card" shadow="always">
      <div class="card-item">
        称呼:<el-input
          v-model="formInline.name"
          placeholder="请输入称呼"
          style="width: 200px"
        />
        Email:<el-input
          v-model="formInline.email"
          placeholder="请输入称呼"
          style="width: 200px"
        />
        状态:<el-select
          v-model="formInline.state"
          class="m-2"
          placeholder="Select"
          size="large"
          style="margin-right: 10px"
        >
          <el-option
            v-for="(item, index) in option"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="btns">
        <el-button type="primary" @click="searchChange">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <!--按钮组 -->
      <div v-if="multipleSelection.length">
        <el-button plain>通过</el-button>
        <el-button plain>拒绝</el-button>
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="InfoFilled"
          icon-color="orange"
          title="确认删除这个文章？"
          @confirm="chooseDeleteArticleLists"
        >
          <template #reference>
            <el-button plain type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column prop="name" fixed label="称呼" width="130" />
        <el-table-column prop="state" label="状态" width="180">
          <template #default="scope">
            <div v-if="scope.row.state === 'true'">
              <span
                style="
                  width: 8px;
                  height: 8px;
                  display: inline-block;
                  background: green;
                  border-radius: 100%;
                "
              ></span>
              <span> 已通过</span>
            </div>
            <div v-else-if="scope.row.state === 'false'">
              <span
                style="
                  width: 8px;
                  height: 8px;
                  display: inline-block;
                  background: red;
                  border-radius: 100%;
                "
              ></span>
              <span>未通过</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="email" label="联系方式" width="250" />
        <el-table-column prop="date" label="日期" width="250" />

        <el-table-column prop="yuan" label="原始内容" width="250" />
        <el-table-column prop="htmlConent" label="HTML内容" width="250" />
        <el-table-column prop="passage" label="管理文章" width="250" />
        <el-table-column prop="date" label="创建时间" width="250" />
        <el-table-column prop="father" label="父级评论" width="250" />

        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="through(scope.row)"
              >通过</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="refused(scope.row)"
              >拒绝</el-button
            >
            <el-button link type="primary" size="small">回复</el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="orange"
              title="确认删除这个文章？"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button link size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 10px;
        "
        small
        background
        :page-size="pageSize"
        :page-sizes="[1, 2, 3, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { ElMessage, InfoFilled } from "element-plus";

import { mapMutations } from "vuex";
// 获取后端数据
import {
  asyncCommentLists,
  asyncDeleteCommentLists,
  asyncChooseDeleteCommentLists,
  asyncRefusedCommentLists,
  asyncThroughCommentLists,
  // asyncPublish,
  // asyncDraft,
} from "../api/comment";
import { RefreshLeft } from "@element-plus/icons-vue";
export default {
  components: {
    RefreshLeft,
  },
  data() {
    return {
      // 面包屑
      breadList: [],
      // 多选数组
      multipleSelection: [],
      //   文章数据
      tableData: [],
      isHidden: false,
      formInline: {
        name: "",
        state: "",
        email: "",
      },
      option: ["已通过", "未通过"],
      // 新建还是添加
      pageCode: 1,
      pageSize: 4,
      total: 0,
    };
  },
  created() {
    this.init();
    this.getCommentLists();
  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
    },
    // 请求数据方法
    async getCommentLists() {
      let flag = "";
      if (this.formInline.state == "已通过") {
        flag = "true";
      } else if (this.formInline.state == "未通过") {
        flag = "false";
      }
      const res = await asyncCommentLists("/commentLists", {
        pageCode: this.pageCode,
        pageSize: this.pageSize,
        name: this.formInline.name,
        email: this.formInline.email,
        state: flag,
      });
      console.log(res);
      this.tableData = res.data.results;
      this.total = res.data.total;
    },
    // 通过
    async through(row) {
      // console.log(row);
      if (row.state == "true") {
        ElMessage({
          message: "评论已通过",
          type: "warning",
        });
      } else {
        const res = await asyncThroughCommentLists("/through", { id: row.id });
        // console.log(res,'iiii')
        if (res.data.code === 200) {
          ElMessage({
            message: "评论已通过",
            type: "success",
          });
          this.getCommentLists();
        }
      }
    },
    // 拒绝
    async refused(row) {
      console.log(row);
      if (row.state == "false") {
        ElMessage({
          message: "已拒绝评论",
          type: "error",
        });
      } else {
        const res = await asyncRefusedCommentLists("/refused", { id: row.id });
        if (res.data.code === 200) {
          ElMessage({
            message: "评论已拒绝",
            type: "success",
          });
          this.getCommentLists();
        }
      }
    },
    // 删除
    async handleDelete(row) {
      const res = await asyncDeleteCommentLists("/deleteCommentLists", {
        id: row.id,
      });
      this.getCommentLists();
      if (res.data.code === 200) {
        this.initClassLists();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }
    },
    // 选中
    handleSelectionChange(val) {
      // 多选删除
      this.multipleSelection = val;
    },
    // 多选删除
    async chooseDeleteArticleLists() {
      const res = await asyncChooseDeleteCommentLists("/commentDel", {
        multipleSelection: this.multipleSelection,
        pageCode: this.pageCode,
        pageSize: this.pageSize,
      });
      console.log(res, "....dsdsd");
      this.getCommentLists();
    },
    // 发布
    // async publish() {
    //   const res = await asyncPublish("/publish", {
    //     multipleSelection: this.multipleSelection,
    //   });
    //   if (res.data.code === 200) {
    //     this.getCommentLists();
    //     ElMessage({
    //       message: "操作成功",
    //       type: "success",
    //     });
    //   }
    // },
    // 草稿
    // async Draft() {
    //   const res = await asyncDraft("/draft", {
    //     multipleSelection: this.multipleSelection,
    //   });
    //   if (res.data.code === 200) {
    //     this.getCommentLists();
    //     ElMessage({
    //       message: "操作成功",
    //       type: "success",
    //     });
    //   }

    // },
    searchChange() {
      this.getCommentLists();
    },
    // 分页
    handleSizeChange(val) {
      console.log(val, "44");
      this.pageSize = val;
      this.getCommentLists();
    },
    handleCurrentChange(val) {
      this.pageCode = val;
      console.log(val);
      this.getCommentLists();
    },
  },
};
</script>
<style>
.title-card,
.box-card {
  margin-top: 20px;
}
.card-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>